<f:view xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
    xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui"
	xmlns:pm="http://primefaces.org/mobile"
	contentType="text/html"
    renderKitId="PRIMEFACES_MOBILE">

    <pm:page title="Maps">

        <f:facet name="postinit">
            <h:outputScript library="primefaces" name="gmap/gmap.js" />
			<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
            <script type="text/javascript">
	            
	        	var directionsDisplay = new google.maps.DirectionsRenderer();
	        	var directionsService = new google.maps.DirectionsService();
	        	var waypts = [];
	        	
                function findMe() {
                    navigator.geolocation.getCurrentPosition(
                        function(position) {
                            var map = gmap.getMap(),
                            latlng = new google.maps.LatLng(-40.82888,-62.97316);

                            map.setCenter(latlng);

                            var marker = new google.maps.Marker({
                                position: latlng
                            });

                            marker.setMap(map);

                	        waypts.push({
                			    location:  new google.maps.LatLng(-40.80985,-63.00822),
                			    stopover:true
                			});
                	        waypts.push({
                			    location:  new google.maps.LatLng(-40.80777,-63.00990),
                			    stopover:true
                			});
                	      
                	        
                	        
                			var request = {
                			        origin: 'alvear 1099, viedma',
                			        destination:'alvear 1099, viedma',
                				waypoints: waypts,
                			        optimizeWaypoints: true,
                			        travelMode: google.maps.DirectionsTravelMode['DRIVING'],
                			        unitSystem: google.maps.DirectionsUnitSystem['METRIC'],
                			        provideRouteAlternatives: true
                			    };
                			directionsService.route(request, function(response, status) {
                		        if (status == google.maps.DirectionsStatus.OK) {
                		            directionsDisplay.setMap(map);
                		            directionsDisplay.setDirections(response);
                		        } else {
                		            alert("No existen rutas entre ambos puntos");
                		        }
                		    });

                            
                        },
                        function(error) {
                            alert(error.message);
                        },
                        {
                           enableHighAccuracy: true
                        });
                }

            </script>
		</f:facet>

        <!-- Main View -->
        <pm:view id="main" swatch="a">
            <pm:header title="Lineas de Colectivo">
                
            </pm:header>

            <pm:content>
                <p:gmap center="-40.82888,-62.97316" zoom="15" fitBounds="true"  type="MAP" style="width:100%;height:15em" widgetVar="gmap"/>

                <p:separator />

                <p:commandButton type="button" value="Linea D" onclick="findMe()"/>
            </pm:content>

        </pm:view>

    </pm:page>

</f:view>